<template>
    <Modal
        :closable="false"
        :loading="loading"
        @on-cancel="userCancel"
        @on-ok="userAddOk"
        id="userAdd"
        title="新增用户"
        v-model="modalSta"
    >
        <Row>
            <Col :span="20">
                <Form
                    :label-width="100"
                    :model="userAddForm"
                    :rules="userAddRule"
                    label-position="right"
                    ref="userAddForm"
                >
                    <FormItem label="用户名:" prop="name">
                        <Input 
                            placeholder="请输入用户名" 
                            v-model="userAddForm.name"
                        ></Input>
                    </FormItem>
                    <FormItem label="密码:" prop="password">
                        <Input 
                            placeholder="请输入密码" 
                            v-model="userAddForm.password"
                        ></Input>
                    </FormItem>
                    <FormItem label="确认密码:" prop="verifyPassword">
                        <Input 
                            placeholder="请确认密码" 
                            v-model="userAddForm.verifyPassword"
                        ></Input>
                    </FormItem>
                    <FormItem label="所属区域:" prop="region">
                        <Cascader
                            :data="pcd"
                            change-on-select
                            v-model="userAddForm.region"
                        ></Cascader>
                    </FormItem>
                </Form>
            </Col>
        </Row>
    </Modal>
</template>
<script>
export default {
    name: "UserAdd",
    props: {
        addSta: {
            type: Boolean,
            default: false
        }
    },
    data() {
        // 确认密码
        const verifyPasswordRuleFn = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请确认新密码"));
            } else if (value !== this.userAddForm.password) {
                callback(new Error("确认密码和密码不一致"));
            } else {
                callback();
            }
        };
        return {
            // 模态框状态
            modalSta: this.addSta,
            // 省市区数据
            pcd: [],
            loading: true,
            // 表单
            userAddForm: {
                name: "",
                password: "",
                verifyPassword: "",
                region: ""
            },
            // 规则
            userAddRule: {
                name: [
                    {
                        required: true,
                        message: "请输入用户名",
                        trigger: "blur"
                    }
                ],
                password: [
                    {
                        required: true,
                        message: "请输入密码",
                        trigger: "blur"
                    }
                ],
                verifyPassword: [
                    {
                        required: true,
                        validator: verifyPasswordRuleFn,
                        trigger: "blur"
                    }
                ],
                region: [
                    {
                        required: true,
                        message: "请选择权限所属区域",
                        trigger: "change"
                    }
                ]
            }
        };
    },
    created() {
        let _self = this;
        let obj = {};
        // 获取获取省市区
        this.$axios.post("/dic/allPcd", obj).then(res => {
            if (res.data) {
                _self.pcd = res.data;
            } else {
                _self.$Message.error("请求数据失败");
            }
        });
    },
    mounted() {},
    computed: {},
    methods: {
        // 选择省市区
        changePCD(v, s) {
            console.log(v, s);
        },
        // 提交
        userAddOk() {
            let _self = this;
            this.$refs["userAddForm"].validate(valid => {
                if (valid) {
                    setTimeout(() => {
                        let obj = {
                            name: this.userAddForm.name,
                            password: this.userAddForm.password,
                            region: this.userAddForm.region
                        };
                        this.$axios.post("/acl/userAdd", obj).then(res => {
                            _self.$emit("changeAddSta", {
                                name: "xxx"
                            }); // 关闭模态框
                            _self.$refs["userAddForm"].resetFields(); // 清空表单
                        });
                    }, 1000);
                } else {
                    this.loading = false; // 动画
                }
            });
        },
        // 取消
        userCancel() {
            this.$Message.error("取消");
        }
    },
    watch: {
        addSta(n) {
            this.modalSta = n;
        }
    }
};
</script>
